<template>
	<!-- 月历滚动插件 -->
	<view class="statistic_month">
		<!-- 月历顶部信息 -->
		<view class="month_info">
			<picker mode="date" :value="selectedDate" fields="month" @change="bindDateChange">
				<text class="uni-month__header-text month__header-year">{{ getAssignDateInfo(false,0) }}</text>
				<text class="uni-month__header-text month__header-month">{{ getAssignDateInfo(false,1) }}月</text>
			</picker>
			<text v-show="showBackToTodayBtn" class="backToToday" :style="{color: dateActiveColor}"
				@tap="goToCurrentMonth()">回到本月</text>
		</view>
		<!-- 月历轮播 -->
		<view class="month_swiper">
			<swiper key="normalSwiper" circular :style="{height: swiperHeight}" :current="current" :duration="duration"
				:skip-hidden-item-layout="true" @change="e => current = e.detail.current" @transition="swiperTransition"
				@animationfinish="swiperTransitionFinish">
				<swiper-item v-for="(swiper, swiperIndex) in 3" :key="swiperIndex" class="swiper-item">
					<monthBox :cellHeight="cellHeight" :startMonth="monthDateCache[swiperIndex].firstMonth" :dateActiveColor="dateActiveColor"
						:textActiveColor="textActiveColor" :selectedDate="selectedDate"
						:currentDate="getAssignDateInfo(true, 0) + '-' + getAssignDateInfo(true, 1)"
						:showActive="showActive"
						@chooseDate="chooseDate">
					</monthBox>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from './js/utils.js'
	import monthBox from './monthBox.vue'
	export default {
		name: "statistic-month",
		components: {
			monthBox
		},
		props: {
			duration: { // 轮播图动画时长
				type: Number,
				default: 300
			},
			cellHeight: { // 一列的高度
				type: Number,
				default: 75
			},
			dateActiveColor: { // 日期选中颜色
				type: String,
				default: '#62AEF8'
			},
			textActiveColor: { // 日期选中文字颜色
				type: String,
				default: '#FFFFFF'
			},
			defaultSelectedDate: { // 默认选中日期
				type: String | null,
				default: null
			},
		},
		data() {
			return {
				today: parseTime(new Date(), '{y}-{m}'), // 今天日期
				current: 1, // 当前轮播默认显示索引
				selectedDate: null, // 选中日期
				showActive: true,
				monthDateCache: []
			};
		},
		computed: {
			/* 获取指定日期信息
			isToday: 是否获取当天的信息还是选中日期的信息
			index: 0 表示年份 1 表示月份 2 表示日期 */
			getAssignDateInfo() {
				return (isToday, index) => {
					return (isToday ? this.today : this.selectedDate).split('-')[index] * 1
				}
			},
			// 返回轮播图高度
			swiperHeight() {
				const shrinkHeight = this.cellHeight + 20 + 'rpx'
				return shrinkHeight;
			},
			// 是否显示回到本月按钮
			showBackToTodayBtn() {
				return this.getAssignDateInfo(true, 0) !== this.getAssignDateInfo(false, 0) || this.getAssignDateInfo(true, 1) !== this.getAssignDateInfo(false, 1);
			},
		},
		created() {
			this.init() // 初始化数据
		},
		watch: {
			// 轮播切换
			current(newV, oldV) {
				if (newV === 0 && oldV === 2) { // 右滑
					this.swiperChange(1)
					return
				}
				if (newV === 2 && oldV === 0) { // 左滑
					this.swiperChange(-1)
					return
				}
				if (newV > oldV) { // 右滑
					this.swiperChange(1)
				} else { // 左滑
					this.swiperChange(-1)
				}
			},
		},
		methods: {
			// 初始化数据，缓存当前月和邻月/年的数据
			init() {
				if (this.selectedDate === null) { // 默认选中日期为当天
					this.selectedDate = this.defaultSelectedDate || this.today
				}
				this.generateMonthDateCache(this.getAssignDateInfo(true, 0),this.getAssignDateInfo(true, 1))
			},
			/* picker选择年月 */
			bindDateChange(e) {
				const value = e.detail.value
				this.selectedDate = value;
				this.generateMonthDateCache(this.getAssignDateInfo(false, 0), this.getAssignDateInfo(false, 1))
			},
			/* 选中日期事件 */
			chooseDate(e) {
				this.selectedDate = parseTime(new Date(	e.split('-')[0], e.split('-')[1] - 1), '{y}-{m}');
				this.emitDate();
			},
			// 回到本月事件
			goToCurrentMonth(){
				this.selectedDate = parseTime(new Date(this.getAssignDateInfo(true, 0), this.getAssignDateInfo(true, 1) - 1), '{y}-{m}');
				this.generateMonthDateCache(this.getAssignDateInfo(true, 0), this.getAssignDateInfo(true, 1))
			},
			// 轮播图切换结束
			swiperChange(e) {
				this.getstartMonthOfYear(e)
			},
			//轮播滑动中触发，取消展示高亮
			swiperTransition(e) {
				if (e.detail.dx != 0) {
					this.showActive = false;
				}
			},
			//轮播结束时触发，默认选中每张轮播的第一个月
			swiperTransitionFinish(e) {
				if(!this.showActive){
					this.showActive = true;
				}
			},
			// 获取年月的起始月份
			getstartMonthOfYear(type) {
				let startYear,startMonth;
				if (type == 1) {
					startMonth = this.getAssignDateInfo(false, 1) + (type) * 6 > 12 ? 1 : 7;
					startYear = this.getAssignDateInfo(false, 1) + (type) * 6 > 12 ? this.getAssignDateInfo(false,
						0) + 1 : this.getAssignDateInfo(false, 0);
				} else if (type == -1) {
					startMonth = this.getAssignDateInfo(false, 1) + (type) * 6 < 1 ? 7 : 1;
					startYear = this.getAssignDateInfo(false, 1) + (type) * 6 < 1 ? this.getAssignDateInfo(false, 0) -
						1 : this.getAssignDateInfo(false, 0);
				}
				this.selectedDate = parseTime(new Date(startYear, startMonth - 1), '{y}-{m}');
				this.generateMonthDateCache(startYear, startMonth)
			},
			// 根据current自动对轮播数据进行衔接排序
			adjacentSortByCurrent(prev, cur, next) {
				let newArr
				if (this.current === 0) {
					newArr = [cur, next, prev]
				} else if (this.current === 1) {
					newArr = [prev, cur, next]
				} else if (this.current === 2) {
					newArr = [next, prev, cur]
				}
				return newArr
			},
			//对邻月/年进行缓存数据，做相邻月/年份数据衔接
			generateMonthDateCache(year, month){
				year = Number(year)
				month = Number(month)
				let arry = [];  			 //缓存月份数据
				let SM = month < 7 ? 1 : 7;  //起始月份
				arry.push({					 //prev
					year: SM === 7 ? year : year - 1,
					firstMonth: SM === 7 ? 1 : 7
				},{							 //cur
					year: year,
					firstMonth: SM
				},{							 //next	
					year: SM === 7 ? year + 1 : year,
					firstMonth: SM === 7 ? 1 : 7
				})
				const [prev, cur, next] = arry
				let newArry = this.adjacentSortByCurrent(prev, cur, next)
				this.monthDateCache = newArry;
				this.emitDate();
			},
			// 向父组件传递当前选中数据
			emitDate() {
				const e = {
					selectedDate: parseTime(new Date(this.getAssignDateInfo(false, 0), this.getAssignDateInfo(false, 1) - 1), '{y}-{m}'),
				}
				this.$emit('change', e)
			},
		}
	}
</script>

<style lang="scss">
	.statistic_month {
		width: 100%;
		padding: 20rpx 0;
		box-sizing: border-box;
		background-color: #fff;
	}

	.month_swiper {
		border-bottom: 1px solid #F2F2F2;
	}

	/* 月历顶部信息 */
	.month_info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.month_info .backToToday {
		margin-left: auto;
		font-size: 24rpx;
	}

	/* 月历顶部信息 */

	/* piker选择年月 */

	.uni-month__header-text {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.month__header-year {
		padding-right: 8rpx;
		border-right: 1px solid #F2F2F2;
	}

	.month__header-month {
		padding-left: 8rpx;
	}

	/* piker选择年月 */
</style>